<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>XXX管理系统</title>
  <link rel="stylesheet" href="assets/css/bootstrap.css">
  <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>


  <nav class="navbar navbar-expand navbar-dark bg-dark fixed-top">
    <a class="navbar-brand" href="#">XXX管理系统</a>
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="lists.php">用户管理</a>
      </li>
    </ul>
  </nav>  

  <main class="container">
    <h1 class="heading">用户管理</h1>
    <table class="table table-hover">
      <thead>
        <tr>
          <th>#</th>
          <th>头像</th>
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
          <th class="text-center" width="140">操作</th>
        </tr>
      </thead>
      <tbody>
        <!-- <tr>
            <th scope="row">ID</th>
            <td><img src="assets/img/icon-01.png" class="rounded" alt="张三丰"></td>
            <td>张三丰</td>
            <td>男</td>
            <td>1990-01-01</td>
            <td>暂无操作</td>
          </tr>
        <tr> -->
      </tbody>
    </table>
  </main>
</body>

<script>

//书写ajax代码
//让异步发送请求
//1.创建异步对象
var xhr = new XMLHttpRequest();
//2.设置请求行
xhr.open("get","getList.php");
//3.设置请求头  get不需要设置
//3.设置请求体
xhr.send();
//让异步对象接收响应
xhr.onreadystatechange = function(){
  if(xhr.status == 200 && xhr.readyState == 4){
    var result = xhr.responseText;
    // 在js中通过JSON.parse方法将json格式的字符串转换为js数组或者对象(
    // 如果文件以[]来描述数据，那么就转换为数组
    // 如果文件以{}来描述数据，那么就转换为对象)
    // 和php中的json_decode方法的功能大致一样
    var data = JSON.parse(result);
    console.log(data);
    
    var html = '';
    for(var i=0;i<data.length;i++){
      html +=`
      <tr>
            <th scope="row">${data[i].id}</th>
            <td><img src="${data[i].photo}" class="rounded" alt="张三丰"></td>
            <td>${data[i].name}</td>
            <td>${data[i].gender}</td>
            <td>${data[i].age}</td>
            <td>暂无操作</td>
          </tr>
      `;

    }
    document.querySelector("tbody").innerHTML = html;
  }
}




</script>
</html>
